<template>
  <div id="mian" class="black">
    <div id="map"></div>
  </div>
</template>
<script>
import * as d3 from 'd3'
import {MapChart} from './MapChart'
export default {
  name: 'GeoMap',
  data () {
    return {
      jsonUrl: './static/data/China.json',
      mapChart: '',
      path: '',
      data: [],
      jsonData: ''
    }
  },
  created () {
  },
  mounted () {
    this.setData()
  },
  methods: {
    setData () {
      let city = ['辽宁省', '黑龙江省', '新疆维吾尔自治区', '内蒙古自治区', '北京市', '江苏省', '上海市']
      let addtionCity = city.concat(['四川省', '西藏自治区', '福建省', '广东省'])
      let data = []
      let categoryData = []
      let color = d3.scaleOrdinal(d3.schemeCategory10)
      this.mapChart = new MapChart('map', [], this.jsonUrl)
      this.mapChart.initChart()
      this.path = this.mapChart.getPath()
      this.$http.get(this.jsonUrl).then(root => {
        this.jsonData = root.data
        let features = root.data.features
        features.forEach(function (d) {
        // 装备实力
          for (let i = 0; i < addtionCity.length; ++i) {
            if (d.properties.name === addtionCity[i]) {
              addtionCity[i] = JSON.parse(JSON.stringify(d))
            }
          }
        })
        // 装备实力
        for (let i = 0; i < addtionCity.length; ++i) {
          let bound = this.path.centroid(addtionCity[i])
          for (let j = 0; j < Math.random() * 30 + 10; j++) {
            let item = {
              position: [bound[0] - Math.random() * 30, bound[1] + Math.random() * 30],
              location: addtionCity[i].properties.name,
              qualityLevel: parseInt(Math.random() * 10),
              color: color(i)
            }
            data.push(item)
          }
        }
        let cateNums = ['维修BD', '地方维修工厂', '大型维修设施设备', '维修人才']
        let groupNum = data.length / cateNums.length
        let index = 0
        for (let i = 0; i < data.length; i += groupNum) {
          let cate = {
            category: cateNums[index],
            itemColor: color(i),
            shape: 'circle',
            data: data.slice(i, i + groupNum)
          }
          index += 1
          categoryData.push(cate)
        }
        this.data = categoryData
        this.mapChart.title = 'Distribution of maintenance resources'
        this.mapChart.setData(this.data)
        this.mapChart.setJsonData(this.jsonData)
        this.mapChart.draw()
      })
    }
  }
}
</script>
<style scoped>
#mian {
  height: calc(100% - 2px);
  width: calc(100% - 3px);
  border: 1px solid black;
}
#map {
  height: 100%;
  width: 100%;
  border-left: 1px solid black;
  border-right: 1px solid black;
}
</style>
